<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
    <meta content="IE=Edge" http-equiv="X-UA-Compatible">
    <title>小米商城-商品搜索</title>
    <link href="${pageContext.servletContext.contextPath}/images/milogo.png" rel="shortcut icon" type="image/x-icon">
    <meta content="width=1226" name="viewport">
    <link as="style" href="${pageContext.servletContext.contextPath}/st/front/CSS/search.d023544f.css" rel="preload">
    <link href="${pageContext.servletContext.contextPath}/st/front/CSS/search.d023544f.css" rel="stylesheet">
    <script type="text/javascript" src="${pageContext.servletContext.contextPath}/st/front/JS/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="${pageContext.servletContext.contextPath}/st/front/CSS/paging.min.css" />
    <script src="${pageContext.servletContext.contextPath}/st/front/JS/paging.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<jsp:include page="/Front_Head"></jsp:include>
<div class="mi-search page-main">
    <div class="container">
        <div class="search-container" data-v-0812a246="">
            <div class="container-main" data-v-0812a246="" style="">
                <!--                    搜索标头-->
                <div class="breadcrumbs" data-v-0812a246="">
                    <div class="container" data-v-0812a246="">
                        <a data-v-0812a246="" href="${pageContext.servletContext.contextPath}/index" >首页</a>
                        <span class="sep" data-v-0812a246="">&gt;</span>
                        <span id="name" data-v-0812a246="">${name}</span>
                    </div>
                </div>
                <!--搜索分类-->
                <div class="search-filter" data-v-0812a246="">
                    <div class="filter-wrap" data-v-0812a246="" style="height: 90px;">
                        <div class="filter-list" data-v-0812a246="">
                                <span class="label" data-v-0812a246="">分类：</span>
                                <select style="position:relative;left: 40px;top: 15px;">
                                    <option value="0">选择类型</option>
                                    <c:forEach var="list" items="${malltypes}">
                                        <option value="${list.pbid}">${list.pbname}</option>
                                    </c:forEach>
                                </select>
                        </div>
                    </div>
                </div>
                <!--                        查询功能-->
                <div class="search-result" data-v-0812a246="">
                    <div class="reuslt-order" data-v-0812a246="">
                        <!--                            按功能查询-->
                        <div class="order-list-box clearfix" data-v-0812a246="">
                            <ul class="order-list" data-v-0812a246="">
                                <li class="order-item" data-v-0812a246="">
                                    <a id="one" href="javascript: void(0);">新品</a>
                                </li>
                                <li class="order-item" data-v-0812a246="">
                                    <a id="two" href="javascript: void(0);">销量</a>
                                </li>
                                <li class="order-item" data-v-0812a246="">
                                    <a id="third" href="javascript: void(0);">价格
                                        <i class="iconfont" data-v-0812a246=""></i>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <!--                            查询商品显示-->
                        <div class="goods-list-box" data-v-0812a246="">
                            <div class="goods-list clearfix" data-v-0812a246="">
                                <c:forEach var="commlist" items="${page.list}">
                                    <div class="goods-item" data-v-0812a246="">
                                        <div class="figure figure-img" data-v-0812a246="">
                                            <a href="${pageContext.servletContext.contextPath}/FindCid/${commlist.cid}">
                                                <img data-v-0812a246="" height="200" src="${pageContext.servletContext.contextPath}/images/${commlist.picturepath}" width="200">
                                            </a>
                                        </div>
                                        <h2 class="title" data-v-0812a246="">
                                            <a href="${pageContext.servletContext.contextPath}/FindCid/${commlist.cid}">${commlist.comname}</a>
                                        </h2>
                                        <p class="price" data-v-0812a246=""><span data-v-0812a246="">${commlist.minpraice}元</span></p>
                                    </div>
                                </c:forEach>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="box">
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    function ajaxclick(name,id,typeid,currentPageNo){
        $.get("${pageContext.servletContext.contextPath}/TypeSearch",{search:name,id:id,typeid:typeid},function (json){
            if(json){
                var list=json;
                $("#box").empty();
                var listsize="";
                $(".goods-list").empty();
                $.each(list,function(){
                    listsize+="<div class='goods-item' data-v-0812a246=''>"+
                        "<div class='figure figure-img' data-v-0812a246=''>"+
                        "<a href='${pageContext.servletContext.contextPath}/FindCid/"+this.cid+"'>"+
                        "<img data-v-0812a246='' height='200' src='${pageContext.servletContext.contextPath}/images/"+this.picturepath+"' width='200'>"+
                        "</a>"+
                        "</div>"+
                        "<h2 class='title' data-v-0812a246=''>"+
                        "<a href='${pageContext.servletContext.contextPath}/FindCid/"+this.cid+"'>"+this.comname+"</a>"+
                        "</h2>"+
                        "<p class='price' data-v-0812a246=''>"+"<span data-v-0812a246=''>"+this.minpraice+"元"+"</span>"+"</p>"+
                        "</div>"
                });
                $(".goods-list").prepend(listsize);
            }else{
                alert("为空！");
            }
        },"json");
    };
    //新品点击
    $("#one").click(function () {
        var name = $(".navSearch").val();
        var id = $(":selected").val();
        ajaxclick(name, id, 1);
    });
    //销量点击
    $("#two").click(function () {
        var name = $(".navSearch").val();
        var id = $(":selected").val();
        ajaxclick(name, id, 2);
    });
    //价格单击
    $("#third").click(function (){
        var name = $(".navSearch").val();
        var id = $(":selected").val();
        ajaxclick(name, id, 3);
    });
    //价格双击
    $("#third").dblclick(function (){
        var name = $(".navSearch").val();
        var id = $(":selected").val();
        ajaxclick(name, id, 4);
    });


    $(".navSearch").val("${name}");
    var nums = ${page.total}, // 总数
        counts = 12; // 每页个数
        var p = new Page({
            el: '#box',
            nums: nums,
            counts: counts,
            defaultPage: 1,
            showHeadFoot: !false, // 显示首页尾页
            head: '首', // 更改首页文字
            foot: '尾', // 更改尾页文字
            jumpToOrder: true, // 跳转到指定页
            showNowAndAll: true, // 当前页/共几页
            clickEvent: function(currectPage, _this) {
                console.log('点击' + currectPage + '页');
            }
    });
        $(document).ready(function (){
            var id=$(":selected").val();
            var name=$(".navSearch").val();
            //搜索内容
            //alert(name);
            function ajax(name,id,currentPageNo){
                $.get("${pageContext.servletContext.contextPath}/Ajax_Search",{search:name,id:id,currentPageNo:currentPageNo},function (json){
                    if(json.page){
                        var list=json.page.list;
                        var name=json.name;
                        $("#box").empty();
                        var nums=json.page.total;// 总数
                            counts = 12; // 每页个数
                        var p = new Page({
                            el: '#box',
                            nums: nums,
                            counts: counts,
                            defaultPage: currentPageNo,//分页选中页面
                            showHeadFoot: !false, // 显示首页尾页
                            head: '首', // 更改首页文字
                            foot: '尾', // 更改尾页文字
                            jumpToOrder: true, // 跳转到指定页
                            showNowAndAll: true, // 当前页/共几页
                            clickEvent: function(currectPage, _this) {
                                console.log('点击' + currectPage + '页');
                            }
                        });
                        $(".navSearch").val(name);
                        var listsize="";
                        $(".goods-list").empty();
                        $.each(list,function(){
                            listsize+="<div class='goods-item' data-v-0812a246=''>"+
                                "<div class='figure figure-img' data-v-0812a246=''>"+
                                "<a href='${pageContext.servletContext.contextPath}/FindCid/"+this.cid+"'>"+
                                "<img data-v-0812a246='' height='200' src='${pageContext.servletContext.contextPath}/images/"+this.picturepath+"' width='200'>"+
                                "</a>"+
                                "</div>"+
                                "<h2 class='title' data-v-0812a246=''>"+
                                "<a href='${pageContext.servletContext.contextPath}/FindCid/"+this.cid+"'>"+this.comname+"</a>"+
                                "</h2>"+
                                "<p class='price' data-v-0812a246=''>"+"<span data-v-0812a246=''>"+this.minpraice+"元"+"</span>"+"</p>"+
                                "</div>"
                        });
                        $(".goods-list").prepend(listsize);
                    }else{
                        alert("为空！");
                    }
                },"json");
            };
            //点击事件
        $("#box").click(function (){
            var id=$(":selected").val();
            var currentPageNo=$(".inputborder").val();
            ajax(name,id,currentPageNo);
        });
        //失去焦点
        $(".inputborder").blur(function (){
            var id=$(":selected").val();
            var inputborder=$(".inputborder").val();
            ajax(name,id,inputborder);
        });
        //回车
        $(".inputborder").keydown(function (){
            var id=$(":selected").val();
            if (event.keyCode == "13") {//keyCode=13是回车键
                var inputborder=$(".inputborder").val();
                ajax(name,id,inputborder);
            }
        });
        $("select").click(function (){
           var id=$(":selected").val();
           ajax(name,id,1);
        });
    });
</script>
<jsp:include page="tail.jsp"></jsp:include>
</body>
</html>

